<template>
  <div class="w-screen h-screen bg-[#16254b]">
    <div class="fixed left-1/2 top-1/2 origin-top-left" :style="style">
      <v-chart class="chart" :option="option" autoresize />
    </div>
  </div>
</template>

<script setup lang="ts">
import VChart, { THEME_KEY } from 'vue-echarts'
import t from '@/echarts/test'
import { useWindowSize } from '@vueuse/core'

provide(THEME_KEY, 'dark')

const option = shallowRef(t)

const baseWidth = 1920
const baseHeight = 1080
const { width: windowWidth, height: windowHeight } = useWindowSize()
const style = computed(() => {
  const w = windowWidth.value / baseWidth
  const h = windowHeight.value / baseHeight
  const scale = w > h ? h : w
  return {
    width: `${baseWidth}px`,
    height: `${baseHeight}px`,
    transform: `scale(${scale}) translate(-50%, -50%)`
  }
})
</script>

<style scoped lang="scss"></style>
